<div class="main-view">
    <br>

    <div class="left-margin top-margin"><strong class="am-text-primary am-text-lg">用户心愿列表</strong></div>

    <form class="am-form-inline left-margin top-margin" role="form">

        <div class="am-modal am-modal-loading am-modal-no-btn" id="modal-loading">
            <div class="am-modal-dialog">
                <div class="am-modal-hd">正在载入...</div>
                <div class="am-modal-bd">
                    <span class="am-icon-spinner am-icon-spin"></span>
                </div>
            </div>
        </div>

        <div class="top-margin">
            <label class="left-margin">精选:</label>
            <select ng-model="opt.type">
                <option value=''>全部</option>
                <option value='普通'>普通</option>
                <option value='精选'>精选</option>
            </select>
            <label class="left-margin">状态:</label>
            <select ng-model="opt.status">
                <option value=''>全部</option>
                <option value='征集支持中'>征集支持中</option>
                <option value='实现中'>实现中</option>
                <option value='愿望失败'>愿望失败</option>
                <option value='已实现'>已实现</option>
            </select>
            <br/>

            <label class="left-margin">愿望关键字:</label>
            <input type="text" class="form-control" placeholder="" style="margin-left:0;width: 20%"
                   ng-model="opt.desc">

            <label class="left-margin">微信用户openId:</label>
            <input type="text" class="form-control" placeholder="" style="margin-left:0;width: 20%"
                   ng-model="opt.createdBy">
            <br/>

            <label class="left-margin">过期时间:</label>
            <input type="text" class="modal-input calDate" size="16"
                   ng-model="opt.dateExpired$gte">

            <label class="">至:</label>
            <input type="text" class="modal-input calDate" size="16"
                   ng-model="opt.dateExpired$lte">

            <label class="left-margin">发布时间:</label>
            <input type="text" class="modal-input calDate" size="16"
                   ng-model="opt.dateCreated$gte">

            <label class="">至:</label>
            <input type="text" class="modal-input calDate" size="16"
                   ng-model="opt.dateCreated$lte">

            <br/>
            <label class="left-margin">Page:</label>
            <input type="number" name="currentPage" min="1" ng-model="currentPage" ng-change="search()">

            <label class="left-margin">Size per page:</label>
            <input type="number" name="pageSize" min="1" ng-model="pageSize"><br/>

        </div>

        <button id="search-target" data-am-modal="{target: '#modal-loading'}" type="submit"
                class="am-btn am-btn-primary left-margin" ng-click="search()">搜索
        </button>

    </form>
    <br>

    <!--<div class="am-btn-group am-btn-group-xs left-margin top-margin">-->
    <!--<button type="button" class="am-btn am-btn-default" ng-click="exportQuestion()"><span-->
    <!--class="am-icon-download"></span> 导出-->
    <!--</button>-->
    <!--</div>-->

    <div class='left-margin'>
        共<span>{{totalData}}条数据</span>. Page {{currentPage}}
    </div>

    <div class="pagination-table left-margin" id="tab_menu" style="margin-top: 0;">
        <table class="am-table am-table-striped am-table-hover table-main">

            <thead>
            <tr>
                <th class="table-check"><input type="checkbox" ng-click="checkAllWishes()"
                                               ng-checked="checkedWishes.length == wishList.length"></th>
                <th class="table-title">#</th>
                <th class="table-title">id</th>
                <th class="table-title">愿望</th>
                <th class="table-title">条件</th>
                <th class="table-title">微信用户名称</th>
                <th class="table-title">微信用户openId</th>
                <th class="table-title">状态</th>
                <th class="table-title">精选</th>
                <th class="table-title">支持人数</th>
                <th class="table-title">过期时间</th>
                <th class="table-title">剩下时间</th>

                <th class="table-title">浏览次数</th>
                <th class="table-title">发布时间</th>
                <th class="table-title">最后修改时间</th>
                <th class="table-title">操作</th>
            </tr>
            </thead>

            <tbody>
            <tr ng-repeat="(index,wish) in wishList" id="{{wish.objId}}">
                <td class="table-check"><input type="checkbox" class="item-check"
                                               ng-checked="checkedWishes.indexOf(wish.objId) > -1"
                                               ng-click="checkWish(wish.objId)"></td>
                <td>{{(currentPage-1)*pageSize + index+1}}</td>
                <td>{{wish.objId}}</td>
                <td>{{wish.wish.desc}}</td>
                <td><i style="color:red">{{wish.wish.maxDays}}</i>天收集到<i
                        style="color:red">{{wish.wish.minSupport}}</i>个支持
                </td>
                <td><b>{{wish.creator.nickname}}</b></td>
                <td>{{wish.createdBy}}</td>
                <td>
                    <div ng-switch on="wish.status">
                        <div ng-switch-when="征集支持中" style="color:blue">{{wish.status}}</div>
                        <div ng-switch-when="实现中" style="color:red">{{wish.status}}</div>
                        <div ng-switch-when="已实现" style="color:green">{{wish.status}}</div>
                        <div ng-switch-default>{{wish.status}}</div>
                    </div>
                </td>
                <td>
                    <div ng-switch on="wish.type">
                        <div ng-switch-when="精选" style="color:gold">{{wish.type}}</div>
                        <div ng-switch-default>{{wish.type}}</div>
                    </div>
                </td>
                <td>{{wish.supporters.length}}</td>
                <td>
                    <div>{{wish.dateExpired | date:'yyyy-MM-dd'}}<br>{{wish.dateExpired | date:'HH:mm:ss'}}
                    </div>
                </td>
                <td>
                    <div ng-if="wish.timeLeft">
                        {{wish.timeLeft.days}}天{{wish.timeLeft.hours}}小时{{wish.timeLeft.minutes}}分
                    </div>
                </td>
                <td>{{wish.browseCount}}</td>
                <td>
                    <div>{{wish.dateCreated | date:'yyyy-MM-dd'}}<br>{{wish.dateCreated | date:'HH:mm:ss'}}
                    </div>
                </td>
                <td>
                    <div>{{wish.dateLastModified | date:'yyyy-MM-dd'}}<br>{{wish.dateLastModified |
                        date:'HH:mm:ss'}}
                    </div>
                </td>
                <td>
                    <div class="am-btn-toolbar">
                        <div class="am-btn-group am-btn-group-xs">
                            <button type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                    ng-click="triggerWishEdit(wish)"><span class="am-icon-copy"></span> 编辑
                            </button>
                        </div>
                    </div>
                </td>

                <!--<td>-->
                    <!--<div class="am-btn-toolbar">-->
                        <!--<div class="am-btn-group am-btn-group-xs">-->
                            <!--<a data-am-modal="{target:'#modal-edit', width: 800, height: 600}">查看</a>-->

                            <!--<div class="am-modal am-modal-no-btn" id="modal-edit">-->
                                <!--<div class="modal-dialog">-->
                                    <!--<div class="modal-content" style="overflow-y: scroll;height: 600px;">-->
                                        <!--<label class="control-label">状态:</label>&nbsp;&nbsp;{{wish.status}}-->
                                        <!--<select ng-model="wishModel.status" required>-->
                                            <!--<option value="征集支持中">征集支持中</option>-->
                                            <!--<option value="实现中">实现中</option>-->
                                            <!--<option value="愿望失败">愿望失败</option>-->
                                            <!--<option value="已实现">已实现</option>-->
                                        <!--</select><br/>-->
                                        <!--<label class="control-label">精选:</label>&nbsp;&nbsp;{{wish.type}}-->
                                        <!--<select ng-model="wishModel.type" required>-->
                                            <!--<option value="普通">普通</option>-->
                                            <!--<option value="精选">精选</option>-->
                                        <!--</select>-->

                                        <!--<div class="button-area border-top">-->
                                            <!--<button ng-click="updateUserWish(wish.objId, wishModel)"-->
                                                    <!--class="am-btn am-btn-success right-margin top-margin">保存-->
                                            <!--</button>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</td>-->
            </tr>
            </tbody>
        </table>
    </div>

    <!--编辑框 -->
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="modal-edit" style="width:60%;height:90%">
        <div class="am-modal-dialog">
            <div class="am-modal-hd border-bottom" style="text-align: left;">
                <span id="modal-edit-title">编辑愿望</span>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div style="position:absolute; left:9%; right:10%;">
                <div class="am-modal-bd body-area text-left">
                    <form ng-submit="updateUserWish(wishModel.objId, body)">
                        <label class="control-label">objId:</label>&nbsp;&nbsp;{{wishModel.objId}}<br/>
                        <label class="control-label">微信用户名称:</label>&nbsp;&nbsp;{{wishModel.creator.nickname}}<br/>
                        <label class="control-label">支持人数:</label>&nbsp;&nbsp;{{wishModel.supporters.length}}<br/>
                        <label class="control-label">剩下时间	:</label>&nbsp;&nbsp;
                            <div ng-if="wishModel.timeLeft">
                             {{wishModel.timeLeft.days}}天{{wishModel.timeLeft.hours}}小时{{wishModel.timeLeft.minutes}}分
                            </div>
                        <br/>
                        <label class="control-label">浏览次数:</label>&nbsp;&nbsp;{{wishModel.browseCount}}<br/>

                        <label class="control-label">状态:</label>&nbsp;&nbsp;{{wishModel.status}} ->
                        <select ng-model="body.status" required>
                            <option value="征集支持中">征集支持中</option>
                            <option value="实现中">实现中</option>
                            <option value="愿望失败">愿望失败</option>
                            <option value="已实现">已实现</option>
                        </select><br/>

                        <label class="control-label">精选:</label>&nbsp;&nbsp;{{wishModel.type}} ->
                        <select ng-model="body.type" required>
                            <option value="普通">普通</option>
                            <option value="精选">精选</option>
                        </select>

                        <div class="button-area border-top">
                            <button class="am-btn am-btn-success right-margin top-margin">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
    $('.calDate').datetimepicker().on('changeDate', function () {
        $('.calDate').datetimepicker({
            format: 'yyyy-mm-dd hh:ii'
        });
    });

    $(function () {
        $("[data-toggle='popover']").popover();
    });
</script>